<template>
  <el-container >
    <el-aside :width="isCollapseFlag ? '61px' : '230px'" :class="isCollapseFlag? '':'pd-5'" class="bg-58 boxS-i-4">
      <Aside :menuList="menuList" :isCollapse="isCollapseFlag" @getCollapseFlag="getCollapseFlag" :AsideType="AsideType"/>
    </el-aside>
    <el-main>
      <div class="searchInfo">
        <div class="search_title flex-s-between font-18">
          <div class="flex-1 mgr-10 search_input color-f font-f-iR flex boxS-i-4 bg-d3 pd-5 border-r">
            <div class="mgr-10">
              <img src="../../assets/icon/search.svg" alt="">
            </div>
            <div class="flex-1">
              <input type="text" placeholder="search" style="padding:2px">
            </div>
          </div>
          <drop-down class="flex-1" />
          <drop-down class="flex-1"/>
          <div class="flex">
            <div class="flex-n-center">
              <div @click="changeRow('4')" class="mgr-20">
                <img :src="rowType && rowType === '4'? rownInFourAcUrl : rownInFourUrl" alt="">
              </div>
              <div @click="changeRow('6')" class="mgr-20">
                <img :src="rowType && rowType === '6'? rownInSixAcUrl : rownInSixUrl" alt="">
              </div>
            </div>
          </div>
        </div>
        <!-- <search-title :isCollapseFlag="isCollapseFlag"/> -->
        <works-group :groupData="groupData" v-if="textColor===0"/>
        <works-offered :orreredData="orreredData" v-else/>
      </div>
    </el-main>
  </el-container>
</template>
<script>
import Aside from '../component/Aside'
import DropDown from '../component/Dropdown'
import WorksGroup from '../component/WorksGroup'
import WorksOffered from '../component/WorksOffered.vue'
import { menuList } from '../../mock/data'

const groupData = [
  {
    id: 0,
    img_url: require('../../assets/img/tx1.svg'),
    status: '在售',
    price: '3.7',
    participation: '17',
    ratio: '66',
    address: 'click me to copy',
    img_url2: require('../../assets/icon/copy.svg')
  },
  {
    id: 1,
    img_url: require('../../assets/img/tx1.svg'),
    status: '在售',
    price: '3.7',
    participation: '17',
    ratio: '66',
    address: 'click me to copy',
    img_url2: require('../../assets/icon/copy.svg')
  },
  {
    id: 2,
    img_url: require('../../assets/img/tx1.svg'),
    status: 'status',
    price: '3.7',
    participation: '17',
    ratio: '66',
    address: 'click me to copy',
    img_url2: require('../../assets/icon/copy.svg')
  },
  {
    id: 3,
    img_url: require('../../assets/img/tx1.svg'),
    status: 'status',
    price: '3.7',
    participation: '17',
    ratio: '66',
    address: 'click me to copy',
    img_url2: require('../../assets/icon/copy.svg')
  }
]
const orreredData = [
  {
    id: 0,
    img_url: require('../../assets/img/tx1.svg'),
    status: '在售',
    price: '3.7',
    participation: '17',
    ratio: '66',
    address: '0xjs82...9jus7',
    img_url2: require('../../assets/icon/copy.svg')
  },
  {
    id: 1,
    img_url: require('../../assets/img/tx1.svg'),
    status: '在售',
    price: '3.7',
    participation: '17',
    ratio: '66',
    address: '0xjs82...9jus7',
    img_url2: require('../../assets/icon/copy.svg')
  },
  {
    id: 2,
    img_url: require('../../assets/img/tx1.svg'),
    status: 'status',
    price: '3.7',
    participation: '17',
    ratio: '66',
    address: '0xjs82...9jus7',
    img_url2: require('../../assets/icon/copy.svg')
  },
  {
    id: 3,
    img_url: require('../../assets/img/tx1.svg'),
    status: 'status',
    price: '3.7',
    participation: '17',
    ratio: '66',
    address: '0xjs82...9jus7',
    img_url2: require('../../assets/icon/copy.svg')
  }
]
export default {
  components: {
    DropDown,
    WorksGroup,
    Aside,
    WorksOffered
  },
  props: ['textColor', 'AsideType'],
  data() {
    return {
      rowType: '4',
      widthNum: 18,
      marginNum: 1,
      isCollapseFlag: false,
      menuList: menuList,
      groupData: groupData,
      orreredData: orreredData,
      rownInFourAcUrl: require('../../assets/icon/row_four_active.svg'),
      rownInFourUrl: require('../../assets/icon/row_four.svg'),
      rownInSixAcUrl: require('../../assets/icon/row_six_active.svg'),
      rownInSixUrl: require('../../assets/icon/row_six.svg')
    }
  },
  methods: {
    getCollapseFlag: function (val) {
      this.isCollapseFlag = val
    },
    changeRow: function (type) {
      console.log(type)
      console.log(this.isCollapseFlag, '1111111111111')
      this.rowType = type
      if (!this.isCollapseFlag) {
        if (type === '4') {
          this.widthNum = 18
        } else {
          this.widthNum = 12
        }
        this.marginNum = 1
      } else {
        this.marginNum = 0.5
        if (type === '4') {
          this.widthNum = 13.2
        } else {
          this.widthNum = 10
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.search_title {
  .search_input {
  input {
    background: none;
    width: 100%;
  }
}
}

</style>
